import React, { Component } from "react";
import { Switch, Route, Redirect } from "react-router-dom";
import { Menu } from "element-react";
import Not from "./Not";
import Already from "./Already";
import Rubbish from "./Rubbish";
import "./index.scss";
export default class Home extends Component {
  state = {
    MenuList: [
      {
        title: "未导出",
        icon: "el-icon-menu",
        url: "/home/not",
      },
      {
        title: "已导出",
        icon: "el-icon-document",
        url: "/home/already",
      },
      {
        title: "垃圾箱",
        icon: "el-icon-delete2",
        url: "/home/rubbish",
      },
    ],
    index: 1,
  };
  headlePush = (url, i) => {
    this.setState({ index: i });
    this.props.history.push(url);
  };
  render() {
    return (
      <div className="home">
        <div className="home-container">
          <div className="home_le">
            <div className="le_fav">
              <img
                src={require("../../../public/image/xiangji.png").default}
                alt=""
              />
              <span>大赛后台管理系统</span>
            </div>
            <Menu
              defaultActive="1"
              className="el-menu-vertical-demo"
              theme="dark"
            >
              {this.state.MenuList.map((item, i) => {
                return (
                  <div
                    key={i}
                    onClick={this.headlePush.bind(this, item.url, i + 1)}
                  >
                    <Menu.Item
                      index={i + 1 + ""}
                      style={{
                        color:
                          this.state.index === i + 1 ? "rgb(255, 208, 75)" : "",
                      }}
                    >
                      <i className={item.icon}></i>
                      {item.title}
                    </Menu.Item>
                  </div>
                );
              })}
            </Menu>
          </div>
          <div className="home_ri">
            <div className="ri_header"></div>
            <div className="ri_table">
              <Switch>
                <Route path="/home/not" component={Not}></Route>
                <Route path="/home/already" component={Already}></Route>
                <Route path="/home/rubbish" component={Rubbish}></Route>
                <Redirect to="/home/not" />
              </Switch>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
